<!--
    知识点学习
    1：父组件传给子组件问题；
    答：父组件引用子组件的时候，使用import引入，引入之后，绑定事件。
    2：子组件写上props:['dialog'], 方法使用dialog 的变量。
    3：这个时候会遇到一个坑，例如单击弹窗的右上的一个叉，这个时候，就会变成单向绑定。会报错 prop 。。。一个错误。
       因为你没有给事件监听，vue会给一个默认事件，会回传给父组件，这个时候变成单向绑定，发现回传不过去。所以会报错。
    4：el-dialog 标签上加上 :before-close="dialogFormVisible" 方法。dialogFormVisible 对应按钮的 @click="dialogFormVisible" 事件
-->
<template>
    <div>
        <el-dialog title="新增用户" :visible.sync="dialog" id="insert-user" :before-close="dialogFormVisible">
            <el-form :model="form" label-width="80px" ref="form">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="用户名" prop = "requestUsername">
                            <el-input v-model="form.requestUsername" class="inser-input requestUsername"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="年龄" prop = "requestAge">
                            <el-input v-model="form.requestAge" class="inser-input requestAge"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="账号" prop = "requestAccount">
                            <el-input v-model="form.requestAccount" class="inser-input requestAccount"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="密码" prop = "requestPhone" >
                            <el-input v-model="form.requestPassword" class="inser-input requestPassword"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="手机号" prop = "requestPhone">
                            <el-input v-model="form.requestPhone" class="inser-input requestPhone"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="qq" prop = "requestQQ">
                            <el-input v-model="form.requestQQ" class="inser-input requestQQ"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="12">
                        <el-form-item label="邮箱" prop = "requestEmail">
                            <el-input v-model="form.requestEmail" class="inser-input requestEmail"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="座机" prop = "requestMobile">
                            <el-input v-model="form.requestMobile" class="inser-input requestMobile"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>

                <el-form-item label="用户头像">
                    <el-upload class="avatar-uploader" action="#" ref="aupload" prop="file" :on-change="fileUpload" :show-file-list="false" :auto-upload="false">
                        <img v-if="file" :src="file" class="avatar" >
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible">取 消</el-button>
                <el-button type="primary" @click="sumbitUser()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>


<script>
export default {
    data() {
        return {
            form: {
                requestUsername: '',
                requestAge: '',
                requestAccount: '',
                requestPassword: '',
                requestPhone: '',
                requestQQ: '',
                requestEmail: '',
                requestMobile: ''
            },
            file: '',
            imageId: '',
            relativUrl: 'http://127.0.0.1/images/'

        }
    },
    props: ['dialog'],
    methods: {
        //图片上传
        fileUpload(file, fileList) {
            let newFileForm = new FormData();
            newFileForm.append("file", file.raw)
            this.$http({
                method: 'post',
                url: '/admin/upsFile/upload',
                Headers: {
                    "Content-Type": "multipart/form-data"
                },
                data: newFileForm
            }).then(res => {
                console.log("upload:" + res.data.code);
                let result = res.data;
                if (result.code === 200) {
                    this.file = this.relativUrl + result.data.sourceUrl;
                    this.imageId = result.data.id;

                }
            })
        },
        //关闭弹窗方法
        dialogFormVisible() {
            this.$refs.form.resetFields();
            this.$emit("dialogFormVisible", false);
        },
        //注册用户
        sumbitUser() {
            let addUser = this.form;
            let data = {
                "userName": addUser.requestUsername,
                "age": addUser.requestAge,
                "account": addUser.requestAccount,
                "password": addUser.requestPassword,
                "imageId": this.imageId,
                "phone": addUser.requestPhone,
                "mobile": addUser.requestMobile,
                "qq": addUser.requestQQ,
                "email": addUser.requestEmail
            }
            this.$http({
                method: 'post',
                Headers: {
                    "Content-Type": "application/json"
                },
                url: '/admin/login/register',
                data: data
            }).then(res => {
                let result = res.data;
                if (result.code == 200) {
                    this.$message({
                        showClose: true,
                        message: '新增成功',
                        type: 'success',
                        center: true
                    })
                    //调用关闭弹窗方法，里面同事刷新列表
                    this.dialogFormVisible();
                } else {
                    this.$message({
                        showClose: true,
                        message: result.msg,
                        type: 'error',
                        center: true
                    })
                }
            }).catch(error => {
                console.log(error)
                this.$message({
                    message: "服务器系统异常",
                    center: true,
                    type: 'warning'
                })
            })
        }

    }
}

</script>

<style>
.el-form-item__content {
    width: 270px;
    display: block;
}
</style>